<template>
    <div class="reset-container">
        <div class="reset-main">
            <div class="reset-title">重置用户密码</div>
            <div class="reset-form">
                <el-form :model="user" label-width="80px" :rules="rules" ref="resetRef">
                    <el-form-item prop="username" label="账号">
                        <el-input placeholder="请输入你的账号" v-model="user.username" />
                    </el-form-item>
                    <el-form-item prop="email" label="邮箱">
                        <el-input placeholder="请输入你的完整邮箱" v-model="user.email" />
                       
                    </el-form-item>
                    <el-form-item prop="newPassword" label="新密码">
                        <el-input placeholder="请输入你新密码" v-model="user.newPassword" />
                    </el-form-item>
                </el-form>
                <div style="text-align: center;padding-bottom: 20px;">
                    <el-button type="primary" @click="submit">确定</el-button>
                    <el-button @click="$refs['resetRef'].clearValidate();">重置</el-button>
                </div>
                <div style="font-size: 12px;color: #999;text-align: center;">如您的账号未绑定邮箱，请联系管理员处理</div>
            </div>
        </div>

    </div>
</template>

<script>
import {post} from '@/utils/api'
import {rules} from '@/utils/rules'
import md5 from 'js-md5'

export default{
    
    data(){
        let checkEmail = (rule, value, callback)=>{
            if(!rules.email.test(value)){
                return callback('邮箱格式错误~');
            }

            return callback();
        }
        return{
            user:{},
            rules:{
                username:[{ required: true, message: '用户名不能为空', trigger: 'blur' }],
                email:[{ required: true, message: '邮箱不能为空', trigger: 'blur' },{required:true,validator:checkEmail,trigger:'blur'}],
                newPassword:[{ required: true, message: '新密码不能为空', trigger: 'blur' }]
            }

        }
    },
    methods:{
        submit(){
            this.$refs['resetRef'].validate((valid)=>{
                if(valid){
                    const newPassword  = md5(this.user.newPassword);
                    const promise = post({
                        url:'/base-user/back/user/reset/password',
                        data:{username:this.user.username,email:this.user.email,newPassword:newPassword}
                    },false);
                    
                    promise.then(res=>{
                        if(res&&res.code === 200){

                            this.$message.success(res.message);

                            //跳转到登录页
                            this.$router.push('/login');
                            return;
                        }
                        this.$message.error(res.message);
                    })

                }else{
                    this.$message.error('表单数据校验失败,请检查')
                }

            });

        }

    },
    components:{

    }
}

</script>

<style scoped>
.reset-container{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}
.reset-main{
    width: 400px;
}
.reset-title{
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #999;
    padding: 20px;
}
.reset-title::after{
    content:' >';
}
.reset-title::before{
    content: '< ';
}

</style>